<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="60%" :title="`查看视频`">
    <div class="video-box">
      <video controls>
        <source :src="dialogData.videoUrl" />
      </video>
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";

//页面的数据
interface UserDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  videoUrl: string;
  //当前的数据对象
}

// 弹出框的参数
const dialogVisible = ref(false);
const dialogData = reactive<UserDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  videoUrl: ""
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogParam): void => {
  dialogData.optType = params.optType;
  dialogVisible.value = true;
  dialogData.videoUrl = params.url;
};

//页面参数
defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.video-box {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
